<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>桃子海滩</title>

    <script src="https: //cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
    <style>
        @import url("https://fonts.googleapis.com/css?family=Raleway:500");

        body {
            background: #ffecd9;
            display: grid;
            height: 100vh;
            margin: 0;
            place-items: center;
            padding: 1rem
        }

        button {
            /* -webkit-appearance: none; */
            background: -webkit-gradient(to right, #a2ccb6 0%, #fceeb5 50%, #ee786e 100%);
            background: linear-gradient(to right, #a2ccb6 0%, #fceeb5 50%, #ee786e 100%);
            background-size: 500%;
            border: none;
            border-radius: 5rem;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
            color: #fff;
            cursor: pointer;
            font: 1.5em Raleway, sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            height: 5rem;
            letter-spacing: 0.05em;
            outline: none;
            -webkit-tap-highlight-color: transparent;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            width: 20rem
        }

        button:hover {
            animation-name: gradient;
            -webkit-animation-name: gradient;
            animation-duration: 2s;
            -webkit-animation-duration: s;
            animation-iteration-count: 1;
            -webkit-animation-iteration-count: 1;
            animation-fill-mode: forwards;
            -webkit-animation-fill-mode: forwards
        }

        @keyframes gradient {
            0% {
                background-position: 0% 50%
            }

            100% {
                background-position: 100%
            }
        }
    </style>
</head>

<body>
    <button>Beach Time 🌴</button>
</body>

</html>